<template>
  <div class="BOX-box">
    <div class="box">
      <div class="box-icon">
        <div class="box-icon-left">
          <div class="font-size-controls">
            <button class="controls-icon" @click="fontSize -= 0.1">
              <i class="fas fa-minus"></i>
            </button>
            <span class="controls-text">A</span>
            <button class="controls-icon" @click="fontSize += 0.1">
              <i class="fas fa-plus"></i>
            </button>
          </div>
          <button
            id="translate-btn"
            class="controls-icon"
            @click="showTranslation = !showTranslation"
          >
            <i class="fas fa-language"></i>
          </button>
        </div>
        <div class="box-icon-right">
          <button class="controls-icon">
            <i class="far fa-bookmark"></i>
          </button>
          <button class="controls-icon">
            <i class="fas fa-share-alt"></i>
          </button>
        </div>
      </div>
      <div class="english-study">
        <h1 class="english-title">The Future of Artificial Intelligence</h1>
        <div class="meta-container">
          <div class="english-title-icon">
            <span class="title-icon-left">AI 生成</span>
            <span class="title-icon-middle">
              <i class="far fa-eye mr-2"></i>
              2,384 阅读
            </span>
            <span class="title-icon-right">科技</span>
          </div>
          <div class="english-math">
            <span class="text-text">已读 2,145 / 3,500 字</span>
          </div>
        </div>

        <div class="english-article" id="article-content">
          <p
            class="paragraph"
            v-for="(para, index) in paragraphs"
            :key="index"
            :style="{ fontSize: fontSize + 'rem' }"
          >
            {{ para }}
          </p>
        </div>
      </div>
      <div id="translation" :class="{ 'translate-visible': showTranslation }">
        <div class="translate-box">
          <h2 class="translate-title">中文翻译</h2>
          <div class="translate-text">
            <p class="paragraph">
              人工智能已经成为我们日常生活中不可或缺的一部分，正在改变着我们工作、交流和解决问题的方式。从虚拟助手到自动驾驶汽车，AI
              技术继续以前所未有的速度发展。
            </p>
            <p class="paragraph">
              机器学习算法和神经网络的最新进展使 AI
              系统能够以显著的准确性处理和分析海量数据。这已经在医疗保健、金融和环境保护等各个领域取得了突破性进展。
            </p>
            <p class="paragraph">
              然而，随着 AI
              技术变得越来越复杂，关于其对社会、伦理和人类就业的影响的重要问题也随之产生。专家们强调需要负责任的
              AI 开发和实施，以确保这些强大工具能整体上造福人类。
            </p>
            <p class="paragraph">
              展望未来，AI
              与其他新兴技术（如量子计算、生物技术和先进机器人技术）的融合有望释放更大的可能性。研究人员预测在未来十年内，AI
              系统可以帮助解决像气候变化和疾病预防这样复杂的全球性挑战。
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

// 响应式字体大小
const fontSize = ref(1);

// 控制翻译显示
const showTranslation = ref(false);

// 文章段落
const paragraphs = ref([
  "Artificial intelligence has become an integral part of our dailylives, transforming how we work, communicate, and solve problems.From virtual assistants to autonomous vehicles, AI technologies continue to evolve at an unprecedented pace.",
  "Recent advancements in machine learning algorithms and neural networks have enabled AI systems to process and analyze vast amounts of data with remarkable accuracy. This has led to breakthroughs in various fields, including healthcare, finance, and environmental protection.",
  "However, as AI technology becomes more sophisticated, important questions arise about its impact on society, ethics, and human employment. Experts emphasize the need for responsible AI development and implementation to ensure that these powerful tools benefit humanity as a whole.",
  "Looking ahead, the integration of AI with other emerging technologies such as quantum computing, biotechnology, and advanced robotics promises to unlock even greater possibilities. Researchers predict that within the next decade, AI systems could help solve complex global challenges like climate change and disease prevention.",
]);
</script>
<style src="../css/english/reading-study.css"></style>
